<template>
    <div class="Register">
        <!-- 注册导航栏 -->
        <router-link to="/">
            <van-nav-bar title="注册" left-arrow />
        </router-link>
        <van-cell-group class="userinfo">
            <van-field v-model="username" left-icon="user-o" placeholder="请输入账号/手机号" />
            <van-field v-model="password" type="password" clearable left-icon="lock" placeholder="请输入你的密码" />
            <!-- 短信验证码 -->
            <van-field v-model="mobile" center clearable left-icon="records" placeholder="请输入你的手机号">
                <template #button>
                    <van-button class="security" type="primary">发送验证码</van-button>
                </template>
            </van-field>
            <van-field clearable label="短信验证码" placeholder="请输入短信验证码" />
        </van-cell-group>
        <!-- 提交按钮 -->
        <van-button class="submit" type="primary" @click="Register" block>提交</van-button>
        <!-- 跳转到注册页 -->
        <div class="login">
            <span>注册完成可进行登录</span>
        </div>
    </div>
</template>
  
<script>
import { IRegister } from "../api/request.js";
export default {
    name: "register",
    methods: {
        Register() {
            IRegister("/wx/auth/register", {
                username: this.username,
                password: this.password,
                mobile: this.mobile,
                code: this.code,
                phone: this.phone,
            });
            this.$store.state.username = this.username;
        },
    },
    data() {
        return {
            username: null,
            password: null,
            mobile: null,
            code: null,
            phone: null,
        };
    },
};
</script>
<style scoped>
.Register .font {
    font-weight: bold;
    font-size: 20px;
    display: flex;
    flex-direction: column;
}

.Register .font span {
    margin-left: -220px;
}

.Register .font span:first-child {
    margin: 35px 0 5px -305px;
}

.Register .userinfo {
    width: 300px;
    margin: 30px auto;
    padding-bottom: 30px;
}

.Register .van-cell.van-field {
    padding-bottom: 10px;
    margin-bottom: 20px;
    background-color: hsla(0, 1%, 32%, 0.055);
    border-radius: 100px;
}

.Register .van-button {

    background-color: #fac27b;
    border-radius: 100px;
    border: #fac27b;
}

.Register .submit {
    width: 300px;
    margin: -50px auto;
}

.Register .login {
    margin-top: 80px;
    font-size: 10px;
    margin-left: 138px;
}

.Register .security {
    background-color: rgb(20, 220, 37);
    margin: -10px;
}
</style> 